<template>
  <div class="contentbox">
    <div class="wrapperbox">
      <div class="cardbox">
        <div class="carditem" v-for="num in 15">
          <div class="titbox title1">
            <span v-if="num%3==0"><img src="/imgs/icon-vip.png"></span>
            <span v-if="num%3==1"><img src="/imgs/icon-fei.png"></span>
            <span v-if="num%3==2"><img src="/imgs/icon-kuang.png"></span>
            <span v-if="num%3==0" class="c1">￥4999.00</span>
            <span v-if="num%3==1" class="c3">￥4999.00</span>
            <span v-if="num%3==2" class="c2">￥4999.00</span>
          </div>
          <div class="cntbox">
              <span class="c000">微信支付课程素材代码</span>
              <span class="size">3.275M</span>
          </div>
          <div class="cntbox">
              <span class="size">24/01/24</span>
              <span class="down">
                <img src="/imgs/icon_inbox-archive-fill.png"><span class="downtxt">下载</span>
              </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.contentbox .cardbox {
  display: grid;
  grid-template-areas: "a a a";
  grid-gap: 24px;
}

.contentbox .cardbox .carditem {
  height: 150px;
  background: #FFFFFF;
  box-shadow: 0px 4px 24px 0px #E0E5EE;
  border-radius: 10px 10px 10px 10px;
}

.contentbox .cardbox .carditem .titbox,
.contentbox .cardbox .carditem .cntbox
{
  display: flex;
  padding: 0 24px;
  justify-content: space-between
}

.contentbox .cardbox .carditem .titbox .c1 {
  color: rgba(14, 69, 153, 0.9);
  font-weight: bold;
}

.contentbox .cardbox .carditem .titbox .c2 {
  color: rgba(12, 93, 107, 0.9);
  font-weight: bold;
}

.contentbox .cardbox .carditem .titbox .c3 {
  color: rgba(65, 22, 153, 0.9);
  font-weight: bold;
}

.contentbox .cardbox .carditem .title1 {
  height: 40px;
  line-height: 40px;
  background: linear-gradient(90deg, #BFE0FF 0%, rgba(118, 172, 255, 0) 100%);
  border-radius: 10px 10px 0px 0px;
}

.contentbox .cardbox .carditem .cntbox{
  padding-top: 24px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 18px;
}

.contentbox .cardbox .carditem .cntbox .size{font-weight: 400;
  font-size: 12px;
  color: rgba(0,0,0,0.3);
  line-height: 14px;
  letter-spacing: 1px;
}

.contentbox .cardbox .carditem .cntbox .downtxt{
  font-weight: 500;
  font-size: 14px;
  color: rgba(255,155,37,0.9);
  line-height: 16px;
  letter-spacing: 1px;
  padding-left: 5px;
}

</style>